<template>
  <div class="body">
    <!-- 轮播图部分 -->
    <swiper class="swiper" :options="swiperOptions" >
    <swiper-slide>
      <img src="../assets/img/banner/banner01.jpg" alt="">
    </swiper-slide>
    <swiper-slide>
      <img src="../assets/img/banner/banner02.png" alt="">
    </swiper-slide>
        <swiper-slide>
      <img src="../assets/img/banner/banner03.png" alt="">
    </swiper-slide>
        <swiper-slide>
      <img src="../assets/img/banner/banner04.png" alt="">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
        <!-- 上一页 和 下一页 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    </swiper>

    <!-- 预留订车事件窗口 -->
    <index-content/>
    <more/>
    
  </div>
</template>

<script>
import IndexContent from '../components/IndexContent.vue'
import More from '../components/More.vue'
  export default {
  components: { IndexContent, More },
    data() {
      return {
        swiperOptions:{
        // 页数指示点的配置
        pagination:{
          // el代表元素：关联
          el:'.swiper-pagination'
        },
        // 自动滚动
        autoplay:{
          delay: 2000, //滚动时间间隔
          // 不可用当用户触摸后;  false代表此配置无效
          disableOnInteraction: false,
        },
         loop:true,//循环滚动
        //  动画特效
        effect:"fade",//cube fade flip
        // 上一页和下一页按钮
           // 上一页 和 下一页按钮
        navigation: {
          nextEl: ".swiper-button-next", //下一页
          prevEl: ".swiper-button-prev", //上一页
        },
      }
      }
    },
  }
</script>

<style lang="scss" scoped>
.swiper{
  width: 100%;
}
.body {
  width:1920px !important;
}
</style>